<template>
  <div class="search-container">
    <van-search
      :value="value"
      placeholder="输入搜索关键词"
      shape="round"
      :focus="focus"
      background="#ffffff"
      class="search-input"
      @search="onSearch"
      @clear="onCancel"
    />
    <scroll-view
      scroll-y
      class="search-content"
      v-if="value"
    >
      <van-tabs
        swipeable
        animated
        :active="currentTab"
        @change="onChange"
        class="enroll-tabs"
      >
        <van-tab
          :title="tab.title"
          :name="tab.name"
          v-for="(tab,key) in tabs"
          :key="key"
        >
          <scroll-view
            scroll-y
            class="scroll-container"
            v-if="tab.list.length>0"
            @scrolltolower="onLoadTabList"
          >
            <van-card
              :desc="item.description"
              :title="item.name"
              :thumb="item.thumb"
              :tag="item.tag"
              thumb-mode="aspectFill"
              v-for="(item, index) in tab.list"
              :key="index"
            />
          </scroll-view>
          <blank
            v-else
            :value="showEmpty"
            :title="empty.title"
            :message="empty.message"
            :button="empty.button"
            :icon="empty.icon"
          />
        </van-tab>
      </van-tabs>
    </scroll-view>
    <scroll-view
      scroll-y
      class="search-action"
      v-if="!value"
    >
      <div
        class="search-history"
        v-if="history.length>0"
      >
        <van-cell
          title="搜索历史"
          :border="false"
        >
          <van-icon
            slot="right-icon"
            name="delete"
            class="custom-icon"
            @click="onClear"
          />
        </van-cell>
        <div class="search-history-recent">
          <div
            class="search-history-recent__item"
            v-for="(keyword,index) in history"
            :key="index"
            @click="onInput(keyword)"
          >
            {{keyword}}
          </div>
        </div>
      </div>
      <van-tabs
        swipeable
        animated
        :border="false"
        class="search-tabs"
      >
        <van-tab title="搜索发现">
          <navigator
            v-if="advert"
            :url="advert.url"
            class="search-advert"
          >
            <image
              :src="advert.thumb"
              mode="aspectFill"
            />
          </navigator>
          <div class="search-recommend">
            <navigator
              v-for="(item,index) in recommends"
              :key="index"
              :url="item.url"
              class="search-recommend-item"
            >
              {{item.text}}
              <van-tag
                :color="item.tag.bgcolor"
                :text-color="item.tag.color"
                v-if="item.tag"
              >
                {{item.tag.text}}
              </van-tag>
            </navigator>
          </div>
        </van-tab>
        <van-tab title="热门">
          <div
            v-for="(item,index) in hots"
            :key="index"
            class="hot-item"
          >
            <view class="hot-item-rank">
              <image
                :src="'/static/icons/rank_'+item.rank+'.png'"
                mode="aspectFit"
                v-if="item.rank<4"
              />
              <text>{{item.rank}}</text>
            </view>
            <van-card
              :desc="item.description"
              :title="item.title"
              :thumb="item.thumb"
              :tag="item.tag"
              thumb-mode="aspectFill"
              centered
            />
          </div>
          <tip-text text="*想要人数根据商品搜索量，浏览量和购买等指标综合计算得出" />
        </van-tab>
      </van-tabs>
    </scroll-view>
  </div>
</template>

<script>
import TipText from '@/components/bar/tipText'
import Blank from '@/components/blank'
import { getSearchList } from '@/api'
export default {
  components: {
    TipText,
    Blank
  },
  data () {
    return {
      title: '导航栏',
      titleColor: '#000000',
      value: '',
      focus: true,
      history: [],
      advert: {
        thumb: 'http://oss.youmbe.com/mp/advert/01.png',
        url: ''
      },
      recommends: [
        {
          text: 'Redmi 10X 5G 系列',
          tag: null
        },
        {
          text: '云贝众筹',
          tag: {
            text: '功能',
            color: '#BF9D55',
            bgcolor: '#FEF3D7'
          }
        },
        {
          text: 'Redmi K30 Pro',
          tag: null
        },
        {
          text: '向往的智能生活',
          tag: {
            text: '活动',
            color: '#D47978',
            bgcolor: '#FEF0F0'
          }
        },
        {
          text: '小米盒子4c',
          tag: null
        },
        {
          text: '遥控器',
          tag: null
        },
        {
          text: '压力IH电饭煲',
          tag: null
        },
        {
          text: '电视',
          tag: {
            text: '分类',
            color: '#24437A',
            bgcolor: '#D7F7FF'
          }
        },
        {
          text: '智能',
          tag: {
            text: '分类',
            color: '#24437A',
            bgcolor: '#D7F7FF'
          }
        },
        {
          text: '全部商品',
          tag: null
        }
      ],
      hots: [
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/01.png',
          tag: '热',
          rank: 1
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/02.png',
          tag: '热',
          rank: 2
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/03.png',
          tag: '热',
          rank: 3
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/04.png',
          tag: '',
          rank: 4
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/05.png',
          tag: '',
          rank: 5
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/06.png',
          tag: '',
          rank: 6
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/07.png',
          tag: '',
          rank: 7
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/08.png',
          tag: '',
          rank: 8
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/09.png',
          tag: '',
          rank: 9
        },
        {
          title: 'Redmi 10X 5G 系列',
          description: 'Redmi 10X 5G 系列',
          thumb: 'http://oss.youmbe.com/mp/events/10.png',
          tag: '',
          rank: 10
        }
      ],
      tabs: [
        {
          name: 'match',
          title: '赛事',
          list: [],
          page: 0, // 当前页数
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          name: 'activity',
          title: '活动',
          list: [],
          page: 0, // 当前页数
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          name: 'goods',
          title: '商品',
          list: [],
          page: 0, // 当前页数
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          name: 'article',
          title: '文章',
          list: [],
          page: 0, // 当前页数
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        }
      ],
      currentTab: '',
      showEmpty: true,
      empty: {
        title: '您未办理本赛季年票',
        message: '年票发售活动会在票务中心公布展示',
        button: {
          link: null,
          text: '去看看'
        }
      }
    }
  },
  created () {
    console.log('search created')
    this.openLocationsercher()
  },
  watch: {
    currentTab (v) {
      this.onLoadTabList(v)
    },
    value (v) {
      if (v) {
        this.onStorageHistory(v)
        this.initSearch()
        this.currentTab = 'match'
        this.onLoadTabList(this.currentTab)
      }
    }
  },
  methods: {
    onChange (e) {
      this.currentTab = e.mp.detail.name
    },
    initSearch () {
      for (let i = this.tabs.length; i--;) {
        this.tabs[i].list = []
        this.tabs[i].page = 0
        this.tabs[i].meta = {
          totalCount: 0,
          pageCount: 0,
          currentPage: 0,
          perPage: 0
        }
      }
    },
    // 获取数据方法
    getList (index) {
      console.log('enlist getList:', index)
      let that = this.tabs[index]
      if (!that) {
        return
      }
      if (
        that.meta.pageCount > 0 &&
        that.meta.pageCount <= that.meta.currentPage
      ) {
        console.log('数据加载完了')
        return
      } else {
        that.page++
      }
      let params = {
        type: that.name,
        keyword: this.value,
        page: that.page
      }

      getSearchList(params).then(res => {
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()
        // 返回的数据
        const data = res.data

        let itemCount = data.items.length
        if (itemCount > 0) {
          if (that.page > 1) {
            this.tabs[index].list.push(...data.items)
          } else {
            this.tabs[index].list = data.items
          }
        }
        this.tabs[index].meta = data.meta
        console.log(this.tabs[index])
      })
    },
    onLoadTabList () {
      console.log('onLoadTabList')
      for (let i = this.tabs.length; i--;) {
        if (this.tabs[i].name === this.currentTab) {
          this.getList(i)
          break
        }
      }
    },
    onInput (keyword) {
      this.value = keyword
    },
    onSearch (e) {
      let keyword = e.mp.detail
      this.value = keyword.replace(/^\s+|\s+$/g, '')
    },
    // 记录搜索历史
    onStorageHistory (keyword) {
      let history = this.history
      history.unshift(keyword)
      this.history = history.filter((ele, index, self) => {
        return self.indexOf(ele) === index
      })
      mpvue.setStorageSync('searchData', this.history)
    },
    onCancel () {
      console.log('onCancel')
      console.log(this.value)
      this.value = ''
    },
    // 清除缓存历史
    onClear () {
      console.log('onClear')
      wx.removeStorageSync('searchData')
      this.history = []
    },
    // 打开历史记录列表
    openLocationsercher () {
      this.history = mpvue.getStorageSync('searchData') || []
    }
  }
}
</script>

<style lang="less">
.search-container {
  padding-top: 54px;
  height: 100vh;
  .search-input {
    position: fixed;
    left: 0;
    top: 0;
    height: 54px;
    overflow: hidden;
    z-index: 999;
    width: 100%;
  }
  .van-search {
    width: 100%;
  }
}
.van-card {
  background: transparent !important;
  &__thumb {
    width: 58px !important;
    height: 58px !important;
    margin-right: 15px;
  }
  &__img {
    border-radius: 3px;
  }
  &__content {
    min-height: 58px !important;
  }
  &__title {
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
  }
  &__desc {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }
}

.search-content {
  height: 100%;
  .enroll-tabs {
    .van-tabs {
      height: 100%;
      padding-top: 44px;
      .van-sticky {
        position: fixed;
        left: 0;
        top: 54px;
        width: 100%;
      }
      &__content {
        height: 100%;
      }
    }
    .van-tab__pane {
      height: 100%;
      .empty {
        position: relative;
        background: transparent;
        .square-block {
          margin-top: 10%;
        }
      }
    }
    .scroll-container {
      height: 100%;
    }
  }
}
.search-action {
  height: 100%;
  .search-history {
    margin-bottom: 15px;
    .van-cell__title {
      font-weight: bold;
    }
    &-recent {
      padding: 0 15px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      &__item {
        margin: 5px 5px 5px 0;
        padding: 5px 8px;
        line-height: 1;
        font-size: 12px;
        color: #000;
        background: #f6f6f6;
        border-radius: 40px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .search-tabs {
    box-sizing: border-box;
  }
  .van-tabs {
    &__nav {
      padding: 0 10px;
      .van-tab {
        flex: none;
        padding: 0 6px;
        font-weight: bold;
        &:last-child {
          .van-ellipsis::before {
            font: normal normal normal 14px/1 vant-icon;
            content: "\F05A";
            color: #ff6600;
          }
        }
      }
    }
    &__line {
      left: auto !important;
    }
    .van-tab__pane {
      padding: 16px;
    }
  }
  .search-recommend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &-item {
      flex-basis: 50%;
      font-size: 12px;
      padding: 8px 0;
    }
  }
  .search-advert {
    width: 100%;
    position: relative;
    margin-bottom: 15px;
    &::after {
      padding-top: 20%;
      content: "";
      display: block;
    }
    image {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }

  .hot-item {
    display: flex;
    align-items: center;
    &-rank {
      width: 20px;
      height: 40px;
      position: relative;
      padding: 10px 0;
      color: #666;
      text {
        width: 100%;
        height: 100%;
        background: #f1f2f3;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 20px;
      }
      image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 50%;
        z-index: -1;
      }
    }
    &:nth-child(-n + 3) {
      .hot-item-rank {
        color: #ff6600;
      }
    }
    ._van-card {
      flex: 1;
    }
  }
}
</style>
